<div class="clear span-8">
  <div class="sample" style="text-align:center">
    <div class="widget" id="animate_sample"></div>
    <div class="widget_actions">
      <div onclick="animate_sample.animate();">Animate!</div>
    </div>
  </div>
  <h3>animate</h3>
  <p>
    Animates the strokes in the widget.

  </p>

  <h4>Parameters</h4>
  <ol>
    <li>ms <code>number</code></li>
  </ol>
</div>
<div class="span-16 last">
  {% capture js %}
// Animates with 1 second (1000 ms) delay between frames.
viewer.animate(1000);

// If no parameter is provided, delay is 500 ms (default).
viewer.animate();
{% endcapture %}
  <pre class="code">{{ js | strip | escape }}</pre>

  <script type="text/javascript">
    var animate_sample;
    $(document).ready(function() {
      var strokes = [];
      var base_stroke = {
        "type":"path",
        "fill":"none",
        "stroke":"#000000",
        "stroke-opacity":1,
        "stroke-width":5,
        "stroke-linecap":"round",
        "stroke-linejoin":"round"
      };

      function copy(path) {
        strokes.push(jQuery.extend(true, {}, base_stroke, { path: path }));
      }

      copy([["M",10,10],["L",90,90]]);
      copy([["M",90,10],["L",10,90]]);
      copy([["M",10,10],["L",10,90]]);
      copy([["M",10,10],["L",90,10]]);
      copy([["M",90,10],["L",90,90]]);
      copy([["M",10,90],["L",90,90]]);

      animate_sample = Raphael.sketchpad("animate_sample", {
        width: 100,
        height: 100,
        strokes: strokes,
        editing: false
      });
    });
  </script>
</div>
